<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
	<head>
		<th:block th:include="include :: header('虚拟用况接口-数据集选择页面')" />
		<link th:href="@{/css/common.css}" rel="stylesheet"/>
		<link th:href="@{/css/choose_data_map.css}" rel="stylesheet"/>

	</head>
	<body>
		<div class="wrapper wrapper-content field">
			<form id="form-interface-field">
				<div class="content">
					<input type="hidden" name="interfaceId" id="interfaceId" th:value="${interfaceId}">
					<input type="hidden" name="dubboId" id="dubboId" th:value="${dubboId}">
					<input type="hidden" name="isInParam" id="isInParam" th:value="${isInParam}">
					<input type="hidden" name="type" id="type" value="3">
					<input type="hidden" name="fbType" id="fbType" th:value="${fbType}">
					<input type="hidden" name="objectType" id="objectType" value="2">
					<div class="search-bg">
						<div onclick="search()" class="search-img searchDiv"></div>
						<input type="text" class="search" id="searchValue">
					</div>
					<table class="table table-hover" style = "margin-top:10px;">
						<tbody>
						</tbody>
					</table>
				</div>
			</form>
		</div>
	</body>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
		var prefix = ctx + "interface/interface";
		var fieldIdList = [[${fieldIds}]] || [];
		var fieldIdListObject = {};
		function submitHandler() {
			var count = $("#paramsSelected",window.parent.document).text();
			if (count > 0) {
				var config = {
					url: prefix + "/saveVirtualUsageParam",
					type: "post",
					async: false,
					dataType: "json",
					data: $('#form-interface-field').serialize(),
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
						$.modal.disable();
					},
					success: function(result) {
						if (result.code == web_status.SUCCESS) {
							$.modal.close();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						}  else {
							$.modal.alertError(result.msg);
						}
						$.modal.closeLoading();
					}
				};
				$.ajax(config)
			} else {
				$.modal.alertWarning("请选择数据集");
			}
		}

		$(function () {
			if (fieldIdList && fieldIdList.length > 0) {
				for (var i=0; i<fieldIdList.length; i++) {
					fieldIdListObject[fieldIdList[i]] = true;
				}
			}
			search();
		})

		function search() {
			var config = {
				url: prefix + "/listInterfaceParams",
				type: "post",
				async: false,
				dataType: "json",
				data: "type="+$("#fbType").val()+"&interfaceId="+$("#dubboId").val()+"&isInParam="+$("#isInParam").val()+"&searchValue="+$("#searchValue").val(),
				beforeSend: function () {
					$.modal.loading("正在处理中，请稍后...");
				},
				success: function(result) {
					$("table tbody").empty();
					$.modal.closeLoading();
					if (result.code == web_status.SUCCESS) {
						if (result.data && result.data.length > 0) {
							var data = {};
							data.list = convert(result.data);
							var paramsTplHtml = $("#paramsTpl").html();
							laytpl(paramsTplHtml).render(data, function (html) {
								$("table tbody").append(html);
							});

						}
					} else if (result.code == web_status.WARNING) {
						$.modal.alertWarning(result.msg)
					} else {
						$.modal.alertError(result.msg);
					}
				}
			};
			$.ajax(config);
		}

		function convert(data) {
			if (data && data.length > 0) {
				for (var i=0; i<data.length; i++) {
					if (fieldIdListObject[data[i].fieldId]) {
						data[i].selected = true;
					}
				}
			}
			return data;
		}

		function checkboxClick() {
			var count = 0;
			$('table').find(':checkbox').each(function(){
				if ($(this).is(":checked")) {
					count ++;
				}
			});
			$("#paramsSelected",window.parent.document).text(count);
		}

	</script>
	<script id="paramsTpl" type="text/template">
		{{# layui.each(d.list, function(index, a){ }}
		<tr>
			{{# if(a.selected) { }}
			<td><input name="id" disabled="disabled" fieldName="{{a.fieldName}}" fieldEnName="{{a.fieldEnName}}" fieldDataType="{{a.fieldDataType}}" onclick="checkboxClick()" type="checkbox" value="{{a.id}}"></td>
			{{# } else { }}
			<td><input name="id" fieldName="{{a.fieldName}}" fieldEnName="{{a.fieldEnName}}" fieldDataType="{{a.fieldDataType}}" onclick="checkboxClick()" type="checkbox" value="{{a.id}}"></td>
			{{# } }}
			<td>{{a.fieldName}}</td>
			<td>{{a.fieldEnName}}</td>
		</tr>
		{{# }); }}
	</script>
</html>
